<template>
<div class="doctor__list">
  <div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd">全部坐诊医生（<span class="doctor_num">{{doctors.length}}</span>）</div>
    <div class="weui-panel__bd">
      <div class="weui-loadmore" v-if="!isLoaded">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">&nbsp;正在加载</span>
      </div>
      <router-link
        :to="{ name: 'updateDoctor', params: { doctorId: doctor.dc_id }}"
        class="weui-media-box weui-media-box_appmsg"
        v-for="(doctor, index) in doctors"
        :key="index">
        <div class="weui-media-box__hd">
          <img class="weui-media-box__thumb" :src="'http://static.qy-clinic.com/' + doctor.dc_pic" alt="">
        </div>
        <div class="weui-media-box__bd">
          <h4 class="weui-media-box__title">{{doctor.dc_name}}</h4>
          <p class="weui-media-box__desc">{{doctor.dc_intro}}</p>
        </div>
      </router-link>
    </div>
    <div class="weui-loadmore weui-loadmore_line" v-if="doctors.length <= 0 && isLoaded">
      <span class="weui-loadmore__tips">还没有坐诊医生嘛~</span>
    </div>
    <router-link
      :to="{ name: 'addDoctor'}"
      class="add-doctor__action">+&nbsp;新增医生</router-link>
  </div>
</div>
</template>

<script>
export default {
  name: 'Home',

  data() {
    return {
      isLoaded: false,
      doctors: []
    };
  },

  mounted () {
    this.$axios
      .get('http://api.qy-clinic.com/doctors')
      .then((res) => {
        this.isLoaded = true;
        this.doctors = res.data;
      });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  @import '../style/util/color.scss';

  .doctor_num {
    color: $semi-black;
    font-size: 16px;
  }

  .add-doctor__action {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $green;
    font-size: 16px;
  }
</style>
